'use client';

import React, { createContext, useContext, useState, ReactNode, useEffect } from 'react';
import { ThemeConfig } from 'antd';
import { themeConfig } from './theme';

// 定义主题模式
export type ThemeMode = 'light' | 'dark';

// 定义主题上下文的类型
interface ThemeContextType {
  theme: ThemeConfig;
  themeMode: ThemeMode;
  setThemeMode: (mode: ThemeMode) => void;
  toggleTheme: () => void;
}

// 创建主题上下文
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

// 主题提供者组件的Props
interface ThemeProviderProps {
  children: ReactNode;
}

// 深色模式的主题配置 - 适配BI大屏风格
const darkThemeConfig: ThemeConfig = {
  ...themeConfig,
  token: {
    ...themeConfig.token,
    colorBgBase: '#0f1527', // 使用fireCommandCenter的背景色
    colorTextBase: 'rgba(255, 255, 255, 0.95)',
    colorBgContainer: 'rgba(3, 16, 45, 0.6)', // 卡片背景色
    colorBgElevated: 'rgba(3, 16, 45, 0.8)', // 悬浮背景色
  },
  components: {
    ...themeConfig.components,
    Button: {
      ...themeConfig.components?.Button,
      colorBgContainer: 'rgba(3, 210, 253, 0.1)',
      colorBorder: '#03d2fd',
    },
    Input: {
      ...themeConfig.components?.Input,
      colorBgContainer: 'rgba(3, 16, 45, 0.6)',
      colorBorder: '#03d2fd',
      colorText: 'rgba(255, 255, 255, 0.95)',
    },
    Table: {
      ...themeConfig.components?.Table,
      colorBgContainer: 'rgba(3, 16, 45, 0.6)',
      colorText: 'rgba(255, 255, 255, 0.95)',
      colorTextHeading: '#03d2fd',
      // 数据大屏深色模式表格样式
      headerBg: 'rgba(3, 29, 69, 0.8)',
      headerColor: '#03d2fd',
      rowHoverBg: 'rgba(3, 29, 69, 0.8)',
      borderColor: 'rgba(28, 254, 186, 0.2)',
    },
    Card: {
      ...themeConfig.components?.Card,
      colorBgContainer: 'rgba(3, 16, 45, 0.6)',
      colorBorderSecondary: 'rgba(3, 210, 253, 0.3)',
    },
    Menu: {
      ...themeConfig.components?.Menu,
      colorItemText: 'rgba(255, 255, 255, 0.85)',
      colorItemTextSelected: '#03d2fd',
      colorItemBgSelected: 'rgba(3, 210, 253, 0.2)',
    },
    Dropdown: {
      ...themeConfig.components?.Dropdown,
      colorBgElevated: 'rgba(3, 16, 45, 0.95)',
      colorText: 'rgba(255, 255, 255, 0.85)',
    },
    Modal: {
      ...themeConfig.components?.Modal,
      colorBgMask: 'rgba(15, 21, 39, 0.8)',
      colorBgElevated: 'rgba(3, 16, 45, 0.95)',
    },
  },
};

// 主题提供者组件
export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
  // 检查是否有保存的主题模式
  const [themeMode, setThemeMode] = useState<ThemeMode>('light');
  const [theme, setTheme] = useState<ThemeConfig>(themeConfig);

  // 在组件挂载时，从本地存储中获取主题设置
  useEffect(() => {
    const savedThemeMode = localStorage.getItem('themeMode') as ThemeMode;
    if (savedThemeMode) {
      setThemeMode(savedThemeMode);
      setTheme(savedThemeMode === 'dark' ? darkThemeConfig : themeConfig);
    }
  }, []);

  // 切换主题模式
  const toggleTheme = () => {
    const newMode = themeMode === 'light' ? 'dark' : 'light';
    setThemeMode(newMode);
    setTheme(newMode === 'dark' ? darkThemeConfig : themeConfig);
    localStorage.setItem('themeMode', newMode);
  };

  // 明确设置主题模式
  const handleSetThemeMode = (mode: ThemeMode) => {
    setThemeMode(mode);
    setTheme(mode === 'dark' ? darkThemeConfig : themeConfig);
    localStorage.setItem('themeMode', mode);
  };

  const value = {
    theme,
    themeMode,
    setThemeMode: handleSetThemeMode,
    toggleTheme,
  };

  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
};

// 自定义钩子，用于访问主题上下文
export const useTheme = (): ThemeContextType => {
  const context = useContext(ThemeContext);
  if (context === undefined) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
}; 